/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Variables
\* -------------------------------------------------------------- */

$popup_bg: $global-color_white !default;
$popup_fg: $global-color_grey !default;
$popup-link_color: $global-color_primary !default;
$popup-link-hover_color: $global-color_primaryAlt !default;
$popup_borderColor: rgba($popup_fg, 0.8) !default;
$popup_border: 1px solid $popup_borderColor !default;
$popup_borderRadius: $global_borderRadius !default;
$popup_boxShadow: 0 1px 3px 0px rgba($global-color_black, 0.4) !default;
$popup_paddingVertical: 12px;
$popup_paddingHorizontal: 18px;

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

div.Popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .Border {
        background: none;
    }

    .Body {
        padding: $popup_paddingVertical $popup_paddingHorizontal;
        background-color: $popup_bg;
        box-shadow: 0 1px 3px 0px rgba($global-color_black, 0.4);
        border-radius: $popup_borderRadius;
        color: $popup_fg;

        .FormWrapper {
            padding: 0;
        }

        a {
            color: $popup-link_color;

            &:focus,
            &:hover {
                color: $popup-link-hover_color;
                text-decoration: $theme-link-hover_textDecoration;
            }
        }

        input[type="text"],
        textarea,
        ul.token-input-list,
        input.InputBox,
        select {
            border-color: $popup_borderColor;
        }

        .WarningMessage {
            background-color: mix($global-color_warning, $popup_bg, 10%);
            border-color: $global-color_warning;
            color: $popup_fg;
        }

        .Buttons .Close {
            &:focus,
            &:hover {
                color: $global-color_white;
            }
        }
    }

    .Content,
    .Footer {
        color: inherit;
    }

    .Content {
        float: none;
        width: auto !important;
    }

    a.Close {
        top: 24px;
        right: 28px;
        @if ($staticVariables) {
            @include CloseButton($popup_fg);
        }
    }

    .Buttons {
        > *:first-child {
            margin-right: $utility-baseUnitHalf;
        }
    }

    @if ($staticVariables) {
        .Button.change-picture-new {
            @include Button(
                $button-primary_bg,
                $button-primary_fg,
                $button-primary_border,
                $button-primary-hover_bg,
                $button-primary-hover_fg,
                $button-primary-hover_border
            );
        }

        .Button.change-picture-remove {
            @include Button;
        }
    }
}

.InformMessages .InformMessage,
.InformMessages .InformMessage:hover {
    background-color: $popup_bg !important;
    box-shadow: 0 1px 3px 0px rgba($global-color_black, 0.4) !important;
    border-radius: $popup_borderRadius;
    color: $popup_fg !important;
    text-shadow: none;

    a {
        color: $popup-link_color;
    }

    @if ($staticVariables) {
        .Close {
            @include CloseButton($popup_fg);
            display: flex !important;
            margin: $utility-baseUnitHalf;
            font-size: $icon-default_size !important;
        }
    }
}

@if ($staticVariables) {
    #Form_Cancel {
        &:focus,
        &:hover {
            background-color: $button-basic-hover_bg;
            color: $button-basic-hover_fg;
            border-color: $button-basic-hover_border;
        }
    }
}

.Overlay {
    background: rgba($global-color_black, 0.4);
}
